@import './base.less';

/* 通用样式 */
.flex-column {
  display: flex;
  flex-direction: column;
}

/* input框样式 */
.ant-input:hover,
.input-item:hover {
  border-color: var(--input-hover-border-color) !important;
  box-shadow: none;
}
/* 面包屑样式 */
.ant-breadcrumb a:hover {
  color: #595959;
  background: #ebebeb;
}

/* 按钮样式 */
.button-normal {
  font-size: 16px;
  font-family: var(--font-family-buton);
  background: #434343;
  box-shadow: none;
  &:hover {
    background: #595959 !important;
    box-shadow: none;
  }
  &:active {
    background: #262626 !important;
    box-shadow: none;
  }
  &:disabled {
    background: var(--color-menu-active) !important;
    box-shadow: none;
  }
}

.button-simple,
.ant-btn-default {
  color: var(--color-text-second);
  border: 1px solid var(--color-menu-active);
  box-shadow: none;
  transition: none;
  svg use {
    fill: var(--color-text-second);
  }
  &:hover {
    svg use {
      fill: var(--menu-selected-color);
    }
  }
  &:disabled:hover {
    svg use {
      fill: var(--color-text-second);
    }
  }
}

.button-circle{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
  font-size: 16px;
  svg{
    width: 16px;
    height: 16px;
    use{
      fill: #595959;
    }
  }
}

.button-simple-error {
  border: 1px solid var(--color-button-error);
  color: var(--color-button-error);
  box-shadow: none;
  transition: none;
  svg use {
    fill: var(--color-button-error);
  }
  &:hover {
    border: 1px solid var(--color-button-error) !important;
    color: var(--color-button-error) !important;
    svg use {
      fill: var(--color-button-error);
    }
  }
  &:disabled:hover {
    svg use {
      fill: var(--color-button-error);
    }
  }
}

.button-overview {
  border: none;
  box-shadow: none;
  background: transparent;
  margin-right: 5px;
  width: 44px;
  height: 22px;
  padding: 0 2px;
  color: var(--color-text-second);
  &:hover {
    border: none !important;
    background: var(--color-text-white);
    color: var(--color-text-second) !important;
  }
}
.non-border {
  border: none;
  &:hover {
    border: none !important;
  }
}
.icon-button {
  display: flex;
  align-items: center;
  svg {
    margin: 0 5px;
  }
}
.icon-tag {
  display: flex;
  align-items: center;
  svg {
    width: 6px;
    height: 6px;
    margin-right: 4px;
  }
}
/* 下拉菜单样式 */
.header-user .dropdown-menu-item{
  color: var(--color-text) !important;
  height: 40px;
  &:hover {
    background: var(--color-info-background) !important;
    border-radius: 4px;
  }
  &:active {
    background: var(--color-menu-active);
    border-radius: 4px;
  }
}
/* 左边菜单样式 */
.menu-cls .ant-menu-light .ant-menu-item:not(.ant-menu-item-selected),
.ant-menu-light .ant-menu-submenu-title {
  border-radius: 0;
  color: var(--color-text);
  svg use {
    fill: var(--color-default);
  }
  &:hover {
    background-color: var(--color-info-background) !important;
  }
}
.menu-cls .ant-menu-light .ant-menu-submenu-selected > .ant-menu-submenu-title {
  color: var(--color-text);
}
.menu-cls .ant-menu-light .ant-menu-item-selected,
.ant-menu-inline-collapsed > .ant-menu-item-selecte {
  border-radius: 0;
  color: var(--menu-selected-color);
  border-left: 2px solid var(--menu-selected-color);
  svg use {
    fill: var(--menu-selected-color);
  }
}
.menu-cls .ant-menu-submenu > .ant-menu .ant-menu-item {
  border-radius: 0;
}
/* 单选框样式 */
.ant-radio-wrapper .ant-radio-checked .ant-radio-inner {
  background-color: transparent;
  &::after {
    background-color: var(--menu-selected-color);
  }
}
/* 时间轴样式 */
.ant-timeline .ant-timeline-item-head {
  background-color: var(--menu-selected-color);
}
.ant-table-tbody >tr >td {
  color: #3D3D3D
}

/* 页面样式 */
.page-home {
  .flex-column;
  flex: 1;
  margin: 20px;
  border-radius: 4px;
}

.page-home-tab {
  .flex-column;
  flex: 1;
  padding: 0 20px 20px 20px;
  border-radius: 4px;
}
